<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-if="formThead.brand_name" v-model="listQuery.brand_name" style="width: 200px;" class="filter-item" placeholder="品牌名称" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.company_name" v-model="listQuery.company_name" style="width: 200px;" class="filter-item" placeholder="公司名称" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.merchant_name" v-model="listQuery.merchant_name" style="width: 200px;" class="filter-item" placeholder="商家名称" clearable @keyup.enter.native="handleFilter"/>
      <el-date-picker
        v-if="formThead.regtime"
        v-model="listQuery.regtime"
        type="date"
        placeholder="注册时间"
        style="vertical-align: middle;margin-bottom: 10px;"
      />
      <el-date-picker
        v-if="formThead.create_time"
        v-model="listQuery.create_time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="请输入添加开始时间"
        end-placeholder="请输入添加结束时间"
        style="vertical-align: middle;margin-bottom: 10px;"
      />
      <el-select v-if="formThead.status" v-model="listQuery.status" class="filter-item" clearable placeholder="请选择状态">
        <el-option
          v-for="item in statusOption"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
      </el-select>
      <el-input v-if="formThead.business_address" v-model="listQuery.business_address" style="width: 200px;" class="filter-item" placeholder="办公地址" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.mobile_no" v-model="listQuery.mobile_no" style="width: 200px;" class="filter-item" placeholder="联系电话" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.real_name" v-model="listQuery.real_name" style="width: 200px;" class="filter-item" placeholder="联系人名称" clearable @keyup.enter.native="handleFilter"/>
      <el-button v-waves class="filter-item" type="primary" size="small" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.brand_name" label="品牌名称">品牌名称</el-checkbox>
      <el-checkbox v-model="formThead.company_name" label="公司名称">公司名称</el-checkbox>
      <el-checkbox v-model="formThead.regtime" label="注册时间">注册时间</el-checkbox>
      <el-checkbox v-model="formThead.create_time" label="添加时间">添加时间</el-checkbox>
      <el-checkbox v-model="formThead.status" label="状态">状态</el-checkbox>
      <el-checkbox v-model="formThead.business_address" label="办公地址">办公地址</el-checkbox>
      <el-checkbox v-model="formThead.id_card" label="身份证图片">身份证图片</el-checkbox>
      <el-checkbox v-model="formThead.mobile_no" label="联系电话">联系电话</el-checkbox>
      <el-checkbox v-model="formThead.real_name" label="联系人">联系人</el-checkbox>
      <el-checkbox v-model="formThead.business_license" label="营业执照">营业执照</el-checkbox>
      <el-checkbox v-model="formThead.intro" label="简介">简介</el-checkbox>
      <el-checkbox v-model="formThead.brand_image" label="品牌图片">品牌图片</el-checkbox>
    </div>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" element-loading-text="拼命加载中......" border fit highlight-current-row style="width: 100%;" align="center">
      <el-table-column v-if="formThead.merchant_name" label="商家名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.company_name" label="公司名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.company_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.brand_name" label="品牌名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.brand_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.brand_image" label="品牌图片" align="center" width="360px">
        <template slot-scope="scope">
          <span v-if="scope.row.brand_image"><img :src="scope.row.brand_image" alt="" height="120" @click="bigImage(scope.row.brand_image)"></span>
          <span v-else style="color: #0a76a4;">暂无图片</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.business_license" label="营业执照" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.business_license"><img :src="scope.row.business_license" alt="" height="120" @click="bigImage(scope.row.business_license)"></span>
          <span v-else style="color: #0a76a4;">暂无图片</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.real_name" label="联系人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.real_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.mobile_no" label="联系电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile_no }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.id_card" label="身份证图片" align="center">
        <template slot-scope="scope">
          <slideShow :row_data="scope.row"/>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.business_address" label="办公地址" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.business_address }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.status" label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1" style="color: #4AB7BD">未审核</span>
          <span v-else-if="scope.row.status === 2" style="color: #2ac06d">已同意</span>
          <span v-else-if="scope.row.status === 3" style="color: red">已拒绝</span>
          <span v-else style="color: #4AB7BD">未审核</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.regtime" label="注册时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.regtime | formatDate1 }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.intro" label="简介" align="center">
        <template slot-scope="scope">
          <brandDetails :row_data="scope.row"/>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.create_time" label="添加时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!--审核按钮-->
          <span v-if="scope.row.status === 1">
            <el-button type="success" size="small" round @click="review(scope.row.id, 2, scope.row.merchant_id)">同意</el-button>
            <el-button type="warning" size="small" round @click="review(scope.row.id, 3, scope.row.merchant_id)">拒绝</el-button>
          </span>
          <span v-if="scope.row.status === 2">
            <el-button type="warning" size="small" round @click="review(scope.row.id, 3, scope.row.merchant_id)">拒绝</el-button>
          </span>
          <span v-if="scope.row.status === 3">
            <el-button type="success" size="small" round @click="review(scope.row.id, 2, scope.row.merchant_id)">同意</el-button>
          </span>
          <br>
          <viewDetails :row_data="scope.row"/>
        </template>
      </el-table-column>
    </el-table>
    <!--大图弹窗-->
    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null" class="bigImg" @click="bigImage">
        <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
      </div>
    </transition>
    <!--页码-->
    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { getList, reviewProduct } from '@/api/merchant_brand/merchant_brand'
import store from '@/store'
import waves from '@/directive/waves' // 水波纹指令
import editPage from './editPage'
import { parseTime } from '@/utils/index'
import brandDetails from './brandDetails'
import slideShow from './slideShow'
import viewDetails from './viewDetails'

export default {
  name: 'ComplexTable',
  directives: {
    waves
  },
  components: { editPage, brandDetails, slideShow, viewDetails },
  filters: {
    cutOutString: function(val) {
      if (!val) {
        return ''
      } else if (val.length > 100) {
        return val.substring(0, 100) + '......'
      } else {
        return val
      }
    },
    formatDate: function(time) {
      if (!time) {
        return ''
      }
      return parseTime(time)
    },
    formatDate1: function(time) {
      if (!time) {
        return ''
      }
      return parseTime(time, '{y}年{m}月{d}日')
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      bigImageSrc: null,
      listQuery: {
        id: undefined,
        brand_name: undefined,
        company_name: undefined,
        merchant_name: undefined,
        regtime: undefined,
        create_time: undefined,
        status: undefined,
        business_address: undefined,
        mobile_no: undefined,
        real_name: undefined,
        page: 1,
        limit: 20
      },
      formThead: {
        merchant_name: true,
        id: true,
        brand_name: true,
        company_name: true,
        regtime: true,
        create_time: false,
        status: true,
        business_address: false,
        id_card: false,
        mobile_no: true,
        real_name: true,
        business_license: false,
        intro: false,
        brand_image: true
      },
      statusOption: [
        { label: '未审核', value: '1' },
        { label: '同意', value: '2' },
        { label: '拒绝', value: '3' }
      ]
    }
  },
  created() {
    this.getLists()
  },
  methods: {
    getLists() {
      this.listLoading = true
      getList(store.getters.token, this.listQuery).then(response => {
        // console.log('response.data.', response.data)
        this.list = response.data.list
        this.total = response.data.data.total
        this.listLoading = false
      })
    },
    bigImage(src) {
      if (src.length > 0) {
        this.$set(this, 'bigImageSrc', src)
      } else {
        this.$set(this, 'bigImageSrc', null)
      }
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getLists()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getLists()
    },
    review(id, status, merchant_id) {
      const data = {
        id: id,
        status: status,
        merchant_id: merchant_id
      }
      if (status === 3) { // 拒绝
        this.$confirm('此操作有可能下架该商家下级代理的商品', '提示框', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          reviewProduct(store.getters.token, data).then(response => {
            // console.log('审核', response)
            if (response.data.status) {
              this.$message({ type: 'success', message: response.data.msg })
            } else {
              this.$message({ type: 'warning', message: response.data.msg })
            }
            this.getLists()
          })
        }).catch(() => {
          // console.log('正在取消')
        })
      } else {
        reviewProduct(store.getters.token, data).then(response => {
          // console.log('审核', response)
          if (response.data.status) {
            this.$message({ type: 'success', message: response.data.msg })
          } else {
            this.$message({ type: 'warning', message: response.data.msg })
          }
          this.getLists()
        })
      }
    }
  }
}
</script>
<style scoped>
  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }
  .icon-star {
    margin-right: 2px;
  }
  .drag-handler {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .show-d {
    margin-top: 15px;
  }
  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }
  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

</style>

